<template>

  <div class="page_main">
    <div class="left_box">
      <div class="temperature">
        <div class="box_title">园区温度监控</div>
        <div class="charts_box">
          <div class="charts_item" v-for="(item, index) in temperatureList" :key="index">
            <div :ref="'charts' + (index + 1)" class="charts"></div>
            <div class="label">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="entrance_guard">
        <div class="box_title">园区门禁系统</div>
        <div ref="charts11" class="charts"></div>
      </div>
      <div class="entrance_guard2">
        <div class="box_title">园区门禁系统</div>
        <div class="content">
          <div ref="charts12" class="charts"></div>
          <div class="label_box">
            <div class="label_item">
              <div class="num">{{ entranceGuard.peopleDefence }}</div>
              <div class="name">人防</div>
            </div>
            <div class="label_item">
              <div class="num">{{ entranceGuard.thingDefence }}</div>
              <div class="name">物防</div>
            </div>
            <div class="label_item">
              <div class="num">{{ entranceGuard.techDefence }}</div>
              <div class="name">技防</div>
            </div>
          </div>
        </div>
      </div>
      <div class="fire_fighting">
        <div class="box_title">园区消防系统监测</div>
        <div ref="charts13" class="charts"></div>
      </div>
    </div>
    <div class="center_box">
      <div class="flow_rate">
        <div class="rate_box">
          <div class="num">{{ personStatic.total }}<span>人</span></div>
          <div class="label">总人数</div>
        </div>
        <div class="rate_box q">
          <div class="num">{{ personStatic.employee }}<span>人</span></div>
          <div class="label">员工人数</div>
        </div>
        <div class="rate_box q">
          <div class="num">{{ personStatic.security }}<span>人</span></div>
          <div class="label">安保人数</div>
        </div>
        <div class="rate_box">
          <div class="num">{{ personStatic.cleaner }}<span>人</span></div>
          <div class="label">保洁人数</div>
        </div>
      </div>
      <div class="video_box">
        <div class="box_title">园区实时监控</div>
        <div class="video">
          <div class="video_list">
            <div class="image_left"></div>
            <div class="image_right">
              <div class="image_item"></div>
              <div class="image_item"></div>
            </div>
          </div>
          <div class="video_list">
            <div class="image_left"></div>
            <div class="image_right">
              <div class="image_item"></div>
              <div class="image_item"></div>
            </div>
          </div>
          <div class="video_list">
            <div class="image_left"></div>
            <div class="image_right">
              <div class="image_item"></div>
              <div class="image_item"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_box">
      <div class="data_monitoring">
        <div class="list_item">
          <div class="box_title">人员流动监测</div>
          <div ref="charts14" class="list_content"></div>
          <div class="bottom_desc">
            <div class="desc">
              <div class="text">{{ personMonitor.goout }}<span>人</span></div>
              <div class="tips">外出人数</div>
            </div>
            <div class="desc">
              <div class="text blue">{{ personMonitor.visit }}<span>人</span></div>
              <div class="tips">来访人数</div>
            </div>
          </div>
        </div>
        <div class="list_item">
          <div class="box_title">电梯运行监测</div>
          <div ref="charts15" class="list_content"></div>
          <div class="bottom_desc">
            <div class="desc">
              <div class="text">{{ elevatorMonitor.running }}<span>天</span></div>
              <div class="tips">电梯运行次数/天</div>
            </div>
            <div class="desc">
              <div class="text blue">{{ elevatorMonitor.fault }}<span>年</span></div>
              <div class="tips">故障次数/年</div>
            </div>
          </div>
        </div>
      </div>
      <div class="something">
        <div class="box_title">园区处理事情</div>
        <div ref="charts16" class="charts"></div>
      </div>
      <div class="danger">
        <div class="box_title">园区危险监测</div>
        <div ref="charts17" class="charts"></div>
      </div>
      <div class="water_pressure">
        <div class="box_title">消防水压监测</div>
        <div ref="charts18" class="charts"></div>
      </div>
    </div>
    <div class="side_box">
      <div class="electricity">
        <div class="box_title">园区危险监测</div>
        <div ref="charts19" class="charts"></div>
        <div class="electricity_type_box">
          <div class="list">
            <div class="label">安全</div>
            <div class="title">{{ historyAlter.electro }}</div>
          </div>
          <div class="list">
            <div class="label">正常</div>
            <div class="title">{{ historyAlter.room }}</div>
          </div>
        </div>
        <div class="electricity_type_list">
          <div class="list">
            <div class="label">{{ historyAlter.energy }}%</div>
            <div class="title">能耗</div>
          </div>
          <div class="list">
            <div class="label">{{ historyAlter.security }}天</div>
            <div class="title">安防</div>
          </div>
          <div class="list">
            <div class="label">{{ historyAlter.fire }}kpa</div>
            <div class="title">消防</div>
          </div>
        </div>
      </div>
      <div class="real_warn_box">
        <div class="box_title">资源列表</div>
        <div class="warn_box">
          <div class="warn_list">序号</div>
          <div class="warn_list">时间</div>
          <div class="warn_list">告警设备</div>
          <div class="warn_list">告警内容</div>
        </div>

        <div class="warn_info_box">
          <div class="swiper-wrapper">
            <div class="info_box swiper-slide" v-for="(item, index) in altermsg" :key="index" :a="item">
              <div class="info_list">{{ index + 1 }}</div>
              <div class="info_list">{{ item.occTime }}</div>
              <div class="info_list">{{ item.device }}</div>
              <div class="info_list">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper' // 注意引入的是Swiper
import * as echarts from 'echarts';

import api from "@/utils/api/index.js";

export default {
  name: 'SafetyProtection',

  data() {
    return {
      timer: null,
      myChart11: null,
      myChart12: null,
      myChart13: null,
      myChart14: null,
      myChart15: null,
      myChart16: null,
      altermsg: [],
      temperatureList: [
        { label: '北1#', value: '23' },
        { label: '北2#', value: '23' },
        { label: '北3#', value: '23' },
        { label: '北4#', value: '23' },
        { label: '北5#', value: '23' },
        { label: '北6#', value: '23' },
        { label: '北7#', value: '23' },
        { label: '北8#', value: '23' },
        { label: '北9#', value: '23' },
        { label: '北10#', value: '23' }
      ],
      entranceGuard: {
        peopleDefence: 0,//人防
        techDefence: 0,//技防
        thingDefence: 0//物防
      },
      personStatic: {
        cleaner: 0,//	保洁人数
        employee: 0,//员工人数
        security: 0,//安保人数
        total: 0//总人数
      },
      personMonitor: {
        percentage: 0,
        goout: 0,
        visit: 0
      },
      elevatorMonitor: {//电梯运行监测
        fault: 0,//故障次数/年
        running: 0,//电梯运行次数/天
      },
      historyAlter: {
        electro: "正常",
        energy: 13,
        fire: 326,
        power: 827,
        room: "正常",
        security: 150
      },
      warn_info_box: null
    }
  },

  mounted() {
    this.initCharts()

    // this.initChartsTemperature()
    // this.initSwiper()
    // this.initCharts11()
    // this.initCharts12()
    // this.initCharts13()
    // this.initCharts14()
    // this.initCharts15()
    // this.initCharts16()
    // this.initCharts17()
    // this.initCharts18()
    // this.initCharts19()
  },
  beforeDestroy() {
    this.clearData();
    this.warn_info_box = null
  },

  methods: {
    initCharts() {
      this.myChart11 = echarts.init(this.$refs.charts11)
      this.myChart12 = echarts.init(this.$refs.charts12)
      this.myChart13 = echarts.init(this.$refs.charts13)
      this.myChart14 = echarts.init(this.$refs.charts14)
      this.myChart15 = echarts.init(this.$refs.charts15)
      this.myChart16 = echarts.init(this.$refs.charts16)
      this.myChart17 = echarts.init(this.$refs.charts17)
      this.myChart18 = echarts.init(this.$refs.charts18)
      this.myChart19 = echarts.init(this.$refs.charts19)
      this.getData()
      this.switper()
    }, /**
  * 获取数据
  */
    async getData() {
      var that = this;
      await api.getSecurity({}).then(({ data }) => {
        if (data.code == 200) {
          console.log("安防", data);
          that.setData(data.result);
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.echartsAutoTime
      );

    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    /**
   * 整理格式
   */
    setData(result) {
      var that = this
      // 人员统计
      if (result.personStatic) {
        that.personStatic = result.personStatic
      }
      if (result.historyAlter) {
        that.historyAlter = result.historyAlter
        that.initCharts19(result.historyAlter.power)
      }
      //园区温度监控
      if (result.tempMonitor) {
        that.temperatureList = []
        var list = []
        var v1 = (result.tempMonitor.value1).substring(0, result.tempMonitor.value1.length - 1);
        var v3 = (result.tempMonitor.value3).substring(0, result.tempMonitor.value3.length - 1);
        var v5 = (result.tempMonitor.value5).substring(0, result.tempMonitor.value5.length - 1);
        var v7 = (result.tempMonitor.value7).substring(0, result.tempMonitor.value7.length - 1);
        var v9 = (result.tempMonitor.value9).substring(0, result.tempMonitor.value9.length - 1);
        var v2 = (result.tempMonitor.value2).substring(0, result.tempMonitor.value2.length - 1);
        var v4 = (result.tempMonitor.value4).substring(0, result.tempMonitor.value4.length - 1);
        var v6 = (result.tempMonitor.value6).substring(0, result.tempMonitor.value6.length - 1);
        var v8 = (result.tempMonitor.value8).substring(0, result.tempMonitor.value8.length - 1);
        var v10 = (result.tempMonitor.value10).substring(0, result.tempMonitor.value10.length - 1);
        list.push({ label: result.tempMonitor.name1, value: v1 })
        list.push({ label: result.tempMonitor.name2, value: v2 })
        list.push({ label: result.tempMonitor.name3, value: v3 })
        list.push({ label: result.tempMonitor.name4, value: v4 })
        list.push({ label: result.tempMonitor.name5, value: v5 })
        list.push({ label: result.tempMonitor.name6, value: v6 })
        list.push({ label: result.tempMonitor.name7, value: v7 })
        list.push({ label: result.tempMonitor.name8, value: v8 })
        list.push({ label: result.tempMonitor.name9, value: v9 })
        list.push({ label: result.tempMonitor.name10, value: v10 })
        that.temperatureList = list
        this.initChartsTemperature()
      }

      //园区门禁系统
      if (result.guardArea) {
        var value1 = [];
        var value2 = [];
        var value3 = [];
        result.guardArea.forEach((item) => {
          if (item.name == '区域一') {
            value1.push(item.value)
          } else if (item.name == '区域二') {
            value2.push(item.value)
          } else if (item.name == '区域三') {
            value3.push(item.value)
          }

        });
        that.initCharts11(value1, value2, value3)
      }
      //门禁系统数据
      if (result.entranceData) {
        that.entranceData = result.entranceData
        var indicator = [
          { name: '', max: 1500 },
          { name: '', max: 1500 },
          { name: '', max: 1500 },
          { name: '', max: 1500 },
          { name: '', max: 1500 },
          { name: '', max: 1500 },
        ]
        indicator[0].name = result.entranceData.name1
        indicator[1].name = result.entranceData.name2
        indicator[2].name = result.entranceData.name3
        indicator[3].name = result.entranceData.name4
        indicator[4].name = result.entranceData.name5
        indicator[5].name = result.entranceData.name6
        var values = [result.entranceData.value1, result.entranceData.value2, result.entranceData.value3, result.entranceData.value4, result.entranceData.value5, result.entranceData.value6]
        that.initCharts12(indicator, values)

      }
      //门禁系统
      if (result.entranceGuard) {
        that.entranceGuard = result.entranceGuard
      }
      //园区消防系统监测
      if (result.fireMonitor) {
        var value1 = [];
        var value2 = [];
        var value3 = [];
        var xname = [];
        result.fireMonitor.forEach((item) => {
          if (item.line == 'line1') {
            value1.push(item.value)
            xname.push(item.xname)
          } else if (item.line == 'line2') {
            value2.push(item.value)
          } else if (item.line == 'line3') {
            value3.push(item.value)
          }
        });
        that.initCharts13(xname, value1, value2, value3)
      }
      // 人员流动监测
      if (result.personMonitor) {
        that.personMonitor = result.personMonitor
        var percentage = result.personMonitor.percentage.substring(0, result.personMonitor.percentage.length - 1)
        that.initCharts14(percentage)
      }
      //电梯运行监测
      if (result.elevatorMonitor) {
        that.elevatorMonitor = result.elevatorMonitor
        var percentage = result.elevatorMonitor.percentage
        that.initCharts15(percentage)
      }
      //园区处理事情
      if (result.handleThings) {
        that.initCharts16(result.handleThings)
      }
      //园区危险监测
      if (result.riskMonitor) {
        that.initCharts17(result.riskMonitor)
      }
      //消防水压监测
      if (result.pressureMonitor) {
        var value1 = [];
        var value2 = [];
        var xname = [];
        result.pressureMonitor.forEach((item) => {

          if (item.line == 'line1') {
            value1.push(item.value)
            xname.push(item.xname)
          } else if (item.line == 'line2') {
            value2.push(item.value)
          }

        });
        that.initCharts18(xname, value1, value2)

      }
      //实时告警信息
      if (result.altermsg) {
        that.altermsg = result.altermsg
        that.$nextTick(() => {
          that.initSwiper()
        })
      }

    },
    initChartsTemperature() {
      this.temperatureList.forEach((item, index) => {
        const dom = this.$refs[`charts${index + 1}`][0];
        const myChart = echarts.init(dom);

        // 根据 index 决定内部进度条的颜色
        const color = (index % 2 === 0) ? '#1B9FA6' : '#009DFF';

        let option = {
          series: [
            {
              type: 'gauge',
              radius: '90%', // 外层边框的半径
              startAngle: 0,
              endAngle: 360,
              pointer: {
                show: false // 隐藏指针
              },
              progress: {
                show: false // 不显示进度条，只作为圆环边框
              },
              axisLine: {
                lineStyle: {
                  width: 1, // 边框宽度
                  color: [[1, '#00538A']] // 灰色边框
                }
              },
              splitLine: {
                show: false // 不显示刻度线
              },
              axisTick: {
                show: false // 不显示刻度
              },
              axisLabel: {
                show: false // 不显示刻度标签
              },
              detail: {
                show: false // 不显示具体的数值
              }
            },
            // 内层的环形进度条
            {
              type: 'gauge',
              radius: '80%', // 内层环形进度条的半径
              startAngle: 90,
              endAngle: -270,
              pointer: {
                show: false // 隐藏指针
              },
              progress: {
                show: true,
                overlap: false,
                roundCap: true, // 圆角进度条
                clip: false,
                width: 3, // 进度条宽度
                itemStyle: {
                  color: {
                    colorStops: [
                      {
                        offset: 1,
                        color: color // 根据索引设置颜色
                      }
                    ]
                  }
                }
              },
              axisLine: {
                lineStyle: {
                  width: 3, // 环形进度条宽度
                  color: [
                    [1, 'transparent']    // 未激活部分的颜色（灰色）
                  ]
                }
              },
              splitLine: {
                show: false // 不显示刻度线
              },
              axisTick: {
                show: false // 不显示刻度
              },
              axisLabel: {
                show: false // 不显示刻度标签
              },
              data: [
                {
                  value: item.value, // 当前进度
                  // name: '使用率'
                }
              ],
              detail: {
                valueAnimation: true,
                formatter: '{value}℃', // 显示温度传感器标签（如 北1#）
                offsetCenter: ['0%', '0%'], // 标签文字居中
                color: '#30BEF4', // 文字颜色
                fontWeight: 'normal', // 字体样式
                fontSize: 14
              }
            }
          ]
        };
        // 设置选项并渲染图表
        myChart.setOption(option);
      });
    },
    initSwiper() {
      if (this.warn_info_box == null) {
        this.warn_info_box = new Swiper(".warn_info_box", {
          slidesPerView: '9',
          loop: true, // 循环模式选项
          direction: 'vertical', // 垂直切换选项
          autoplay: {
            delay: 1500,
            disableOnInteraction: false
          },//可选选项，自动滑动
          spaceBetween: 0,
          ovserver: true,
          ovserverParents: true
        })
      }

    },
    initCharts11(value1, value2, value3) {
      const dom = this.$refs.charts11
      const myChart = echarts.init(dom)
      let option = {
        color: ['#FFFCCF', '#D84B65', '#1B9FA6'], // 定义颜色，分别对应区域一、区域二、区域三
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 坐标轴指示器，默认是直线，这里是阴影
          }
        },
        legend: {
          data: ['区域一', '区域二', '区域三'],
          textStyle: {
            color: '#FFF' // 图例的字体颜色
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['14:00', '16:00', '18:00', '20:00', '22:00'], // X轴数据
          axisLine: {
            lineStyle: {
              color: '#FFF' // X轴的颜色
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF' // Y轴的颜色
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed', // 使用虚线
              color: '#FFF'
            }
          }
        },
        series: [
          {
            name: '区域一',
            type: 'bar',
            data: value1, // 区域一的数据
            barWidth: '10', // 柱子的宽度
          },
          {
            name: '区域二',
            type: 'bar',
            data: value2, // 区域二的数据
            barWidth: '10',
          },
          {
            name: '区域三',
            type: 'bar',
            data: value3, // 区域三的数据
            barWidth: '10',
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts12(indicator, values) {
      var myChart = this.myChart12
      // const dom = this.$refs.charts12
      // const myChart = echarts.init(dom)
      let option = {
        tooltip: {},
        radar: {
          center: ['50%', '50%'],  // 调整雷达图中心位置
          radius: '40%',           // 调整雷达图半径，增大或减小影响文字位置
          indicator: indicator,
          splitLine: {
            lineStyle: {
              color: '#6D8DAF'  // 网格线颜色
            }
          },
          splitArea: {
            show: false  // 隐藏网格背景色
          },
          axisLine: {
            lineStyle: {
              color: '#6D8DAF'  // 轴线颜色
            }
          },
          name: {
            textStyle: {
              color: '#fff',   // 标签文字颜色
              fontSize: 10,       // 调整字体大小，确保文字不会太小
              overflow: 'break'   // 确保文字不会被截断
            },

          }
        },
        series: [{
          name: '数据',
          type: 'radar',
          data: [
            {
              value: values,
              name: '指标数据',
              // 去掉区域填充
              areaStyle: {
                color: '##00FFF8'  // 占用区域的背景色
              },
              // 去掉数据点
              symbol: 'none',  // 不显示数据点
              lineStyle: {
                color: '#00BFFF'  // 数据线条颜色
              }
            }
          ]
        }]
      };

      myChart.setOption(option);
    },
    initCharts13(xname, value1, value2, value3) {
      var myChart = this.myChart13
      // const dom = this.$refs.charts13
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        grid: {
          left: '10%',
          right: '5%',
          bottom: '20%',
          top: '10%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          data: xname
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          splitLine: {
            show: true, // 显示 y 轴网格线
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
              type: 'dashed' // 将线条样式设置为虚线
            }
          }
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            smooth: true,  // 平滑曲线
            areaStyle: {   // 阴影区域
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(204, 175, 255, 0.6)' },
                { offset: 1, color: 'rgba(204, 175, 255, 0)' },
              ])
            },
            data: value1,
            itemStyle: {
              color: '#CCAFFF' // 第二条折线的颜色
            }
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            smooth: true,  // 平滑曲线
            areaStyle: {   // 阴影区域
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(4, 243, 221, 0.6)' },
                { offset: 1, color: 'rgba(4, 243, 221, 0)' },
              ])
            },
            data: value2,
            itemStyle: {
              color: '#04F3DD' // 第二条折线的颜色
            }
          },
        ]
      };
      myChart.setOption(option);
    },
    initCharts14(percentage) {
      var myChart = this.myChart14
      // const dom = this.$refs.charts14
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#009DFF'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, '#074562']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: percentage, // 当前进度
                // name: '使用率'
              }
            ],
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '0%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts15(percentage) {
      var myChart = this.myChart15
      // const dom = this.$refs.charts15
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#fff'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, '#074562']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: percentage ? percentage : 60, // 当前进度
                // name: '使用率'
              }
            ],
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '0%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts16(data) {
      var myChart = this.myChart16
      // const dom = this.$refs.charts16;
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        color: ['#fff', '#DB4963', '#F0A953'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '10%',
          // left: 'center',
          orient: 'vertical',
          icon: 'rect',
          itemWidth: 8, // 正方形的宽度
          itemHeight: 8, // 正方形的高度
          textStyle: {
            color: '#fff',  // 图例文字颜色为白色
            fontSize: 12,      // 图例文字大小
            fontWeight: 'normal',  // 字体粗细（可选值：'normal', 'bold', 'bolder', 'lighter'）
            fontFamily: 'Arial',   // 字体类型
            lineHeight: 14,        // 设置行高
          },
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
            // data: [
            //   { value: 1048, name: '完成数', itemStyle: { color: '#fff' } },
            //   { value: 735, name: '未完成数', itemStyle: { color: '#DB4963' } },
            //   { value: 580, name: '进行中', itemStyle: { color: '#F0A953' } },
            // ]
          }
        ]
      }
      // 设置图表选项并渲染
      myChart.setOption(option);
    },
    initCharts17(data) {
      var myChart = this.myChart17
      // const dom = this.$refs.charts17;
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        color: ['#DB4963', '#52BAE8', '#1B9FA6', '#fff', '#F0A953'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '传感器类型',
            type: 'pie',
            radius: ['50%', '70%'],  // 控制内外半径，形成环形图
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              color: '#B0C4DE',  // 标签文字颜色
              formatter: '{b}'  // 标签显示数据名称
            },
            labelLine: {
              show: true,
              lineStyle: {
                color: '#B0C4DE'  // 标签线颜色
              }
            },
            data: data
            // data: [
            //   { value: 40, name: '气体泄露', itemStyle: { color: '#DB4963' } },  // 红色
            //   { value: 30, name: '烟感', itemStyle: { color: '#52BAE8' } },     // 蓝色
            //   { value: 20, name: '漏水', itemStyle: { color: '#1B9FA6' } },     // 绿色
            //   { value: 10, name: '压力', itemStyle: { color: '#fff' } },     // 黄色
            //   { value: 15, name: '温感', itemStyle: { color: '#F0A953' } }      // 橙色
            // ]
          }
        ]
      };
      // 设置图表选项并渲染
      myChart.setOption(option);
    },
    initCharts18(xname, value1, value2) {
      var myChart = this.myChart18
      // const dom = this.$refs.charts18;
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        grid: {
          left: '10%',
          right: '5%',
          bottom: '20%',
          top: '10%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          data: xname
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          splitLine: {
            show: true, // 显示 y 轴网格线
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
              type: 'dashed' // 将线条样式设置为虚线
            }
          }
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            smooth: true,  // 平滑曲线
            areaStyle: {   // 阴影区域
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(204, 175, 255, 0.6)' },
                { offset: 1, color: 'rgba(204, 175, 255, 0)' },
              ])
            },
            data: value1,
            itemStyle: {
              color: '#CCAFFF' // 第二条折线的颜色
            }
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            smooth: true,  // 平滑曲线
            areaStyle: {   // 阴影区域
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(4, 243, 221, 0.6)' },
                { offset: 1, color: 'rgba(4, 243, 221, 0)' },
              ])
            },
            data: value2,
            itemStyle: {
              color: '#04F3DD' // 第二条折线的颜色
            }
          },
        ]
      };
      myChart.setOption(option);
    },
    initCharts19(value) {
      var myChart = this.myChart19
      // const dom = this.$refs.charts19;
      // const myChart = echarts.init(dom)
      var colors = [
        '#005DE8',
        '#00FFF8',
        '#23ECB3'
      ];
      let option = {
        // 鼠标悬浮的提示
        tooltip: {
          formatter: '统计数量 : {c}'
        },
        series: [
          {
            type: 'gauge',
            radius: '110%', // 边框的半径
            min: 0, //最大值
            max: 1000, //最小值
            startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -20, //仪表盘结束角度
            splitNumber: 50, //仪表盘刻度的分割段数
            center: ['50%', '65%'],
            itemStyle: {
              color: '#000', //颜色
              shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
              shadowBlur: 10, //图形阴影的模糊大小
              shadowOffsetX: 2, //阴影水平方向上的偏移距离
              shadowOffsetY: 2 //阴影垂直方向上的偏移距离
            },
            progress: {
              show: true, //是否显示进度条
              roundCap: false, //是否在两端显示成圆形
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0.8,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colors[2] // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: colors[1] // 50% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[0] // 75% 处的颜色
                    },
                  ],
                  global: false
                }
              }
            },
            pointer: {
              show: false, //是否显示指针
            },
            axisLine: {
              show: true, //是否显示仪表盘轴线
              // roundCap: false, //是否在两端显示成圆形
              // lineStyle: {
              //   width: 10, // 环形进度条宽度
              //   color: [
              //     [1, '#1A587E']    // 未激活部分的颜色（灰色）
              //   ] // 进度条颜色
              // }
            },
            axisTick: {
              show: false, //是否显示刻度
              // distance: -29,
              // lineStyle: {
              //   color: '#fff', // 刻度线颜色
              //   width: 1 // 刻度线的粗细（这里设置为4像素）
              // }
            },
            splitLine: {
              show: false, //是否显示分隔线
              distance: 1,
              // lineStyle: {
              //   color: '#fff', // 刻度线颜色
              //   width: 1 // 刻度线的粗细（这里设置为4像素）
              // }
            },
            axisLabel: {
              show: false, //是否显示标签
              // distance: 10,
              // color: '#fff', // 刻度标签颜色
              // fontSize: 8 // 标签字体大小
            },
            data: [
              {
                value: value,
                name: '耗电'
              }
            ],
            anchor: {
              show: false,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 2
              }
            },
            title: {
              // show: false,
              fontSize: 12,
              color: '#fff', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              // show: false,
              valueAnimation: true,
              formatter: '{value}kw/h', // 显示进度百分比
              offsetCenter: ['0%', '0%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      }
      myChart.setOption(option);
    },
  }
}
</script>
<style scoped lang="scss">
.page_main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .left_box {
    height: 100%;
    width: 37.48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .temperature {
      height: 24.89%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .charts_box {
        height: calc(100% - 45px);
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .charts_item {
          width: 20%;
          height: 50%;
          display: flex;
          flex-direction: column;

          .charts {
            flex: 1;
            width: 100%;

          }

          .label {
            width: 100%;
            text-align: center;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #30BEF4;
            padding-bottom: 5px;
          }
        }
      }
    }

    .entrance_guard {
      height: 21.65%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;

      .charts {
        flex: 1;
        width: 100%;
      }
    }

    .entrance_guard2 {
      height: 19.05%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;

      .content {
        height: calc(100% - 45px);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .charts {
          width: 40%;
          height: 100%;
        }

        .label_box {
          width: 60%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;

          .label_item {
            width: 72px;
            height: 88px;
            background: url('@/assets/system.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            flex-direction: column;

            .num {
              font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
              font-weight: 400;
              font-size: 16px;
              color: #00FFF8;
            }

            .name {
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #1A9ACB;
            }
          }
        }
      }
    }

    .fire_fighting {
      height: 26%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .charts {
        flex: 1;
        width: 100%;
      }
    }
  }

  .center_box {
    width: 22.27%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    .flow_rate {
      height: 28.14%;
      width: 100%;
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background: #022E51;

      .rate_box {
        width: 50%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        &.q {
          background: #073B62;
        }

        .num {
          font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
          font-weight: 400;
          font-size: 30px;
          color: #30BEF4;

          span {
            font-size: 18px;
          }
        }

        .label {
          margin-top: 5px;
          padding: 7px 0;
          width: 110px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 15px;
          border: 1px solid #1A9ACB;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #1A9ACB;
        }
      }
    }

    .video_box {
      height: 69.05%;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .video {
        height: calc(100% - 65px);
        width: calc(100% - 20px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .video_list {
          height: 32%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .image_left {
            width: 58%;
            height: 100%;
            background: url('@/assets/video.png') no-repeat;
            background-size: 100% 100%;
          }

          .image_right {
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            .image_item {
              height: 49.5%;
              width: 100%;
              background: url('@/assets/video.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }

  .right_box {
    width: 21.1%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .data_monitoring {
      width: 100%;
      display: flex;
      align-items: center;
      height: 24.9%;
      justify-content: space-between;

      .list_item {
        background: #022E51;
        border-radius: 10px 10px 0px 0px;
        width: 48%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;

        .list_content {
          flex: 1;
          width: 100%;
        }

        .bottom_desc {
          display: flex;
          width: 100%;
          align-items: center;

          .desc {
            width: 50%;
            text-align: center;
            padding-bottom: 5px;

            .text {
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 20px;
              color: #FCD159;

              &.blue {
                color: #00FFF8;
              }

              span {
                font-size: 12px;
              }
            }

            .tips {
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 12px;
              color: #1A9ACB;
              text-transform: none;
            }
          }
        }
      }
    }

    .something {
      height: 21.65%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;

      .charts {
        flex: 1;
        width: 100%;
        padding-bottom: 5px;
      }
    }

    .danger {
      height: 21.65%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;

      .charts {
        flex: 1;
        width: 100%;
        padding-bottom: 5px;
      }
    }

    .water_pressure {
      height: 23.38%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;

      .charts {
        flex: 1;
        width: 100%;
        padding-bottom: 5px;
      }
    }
  }

  .side_box {
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .electricity {
      height: 39%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;

      .charts {
        flex: 1;
        width: 100%;
      }

      .electricity_type_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        .list {
          width: 60px;
          height: 72px;
          background: url('@/assets/type.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;

          .label {
            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
            font-weight: 400;
            font-size: 16px;
            color: #00FF55;
          }

          .title {
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            font-size: 12px;
            color: #1A9ACB;
            text-transform: none;
          }
        }
      }

      .electricity_type_list {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 5px auto;

        .list {
          width: 60px;
          height: 72px;
          background: url('@/assets/type.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;

          .label {
            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
            font-weight: 400;
            font-size: 16px;
            color: #00FFF8;
          }

          .title {
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            font-size: 12px;
            color: #1A9ACB;
            text-transform: none;
          }
        }
      }
    }

    .real_warn_box {
      width: 100%;
      height: 59%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .warn_box {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        background: rgba(48, 190, 244, 0.1);

        .warn_list {
          flex: 1;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;
        }
      }

      .warn_info_box {
        height: calc(100% - 69px);
        width: 100%;
        overflow: hidden;

        // .swiper-wrapper{
        .swiper-wrapper {
          width: 100%;

          .info_box {
            display: flex;
            width: 100%;
            align-items: center;

            .info_list {
              width: calc(100% / 4);
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #30BEF4;
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;
              padding: 0 3px;
              overflow: hidden;
              text-align: center;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}

.box_title {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #003F5A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
  font-weight: 400;
  font-size: 18px;
  box-sizing: border-box;
  color: #1A9ACB;
}
</style>